<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的商品 - 校园二手市场</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Noto Serif SC", "Source Han Serif SC", "SimSun", "Times New Roman", serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        /* 顶部导航栏样式 */
        .header {
            background-color: #2c3e50;
            color: white;
            padding: 25px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo h1 {
            font-size: 3rem;
            display: flex;
            align-items: center;
            font-weight: 700;
            min-width: 400px;
            letter-spacing: 2px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        }

        .logo i {
            margin-right: 15px;
            font-size: 1.8rem;
        }

        .logo i.fa-recycle {
            font-size: 3rem;
            margin-right: 15px;
            vertical-align: middle;
            color: #e74c3c;
        }

        .search-bar {
            flex-grow: 1;
            margin: 0 30px;
        }

        .search-bar form {
            display: flex;
            max-width: 600px;
            margin: 0 auto;
        }

        .search-bar input {
            flex-grow: 1;
            padding: 12px 20px;
            border: none;
            border-radius: 6px 0 0 6px;
            font-size: 16px;
        }

        .search-bar button {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 0 6px 6px 0;
            cursor: pointer;
            font-size: 16px;
        }

        .user-menu ul {
            display: flex;
            list-style: none;
        }

        .user-menu li {
            margin-left: 25px;
            min-width: 100px;
        }

        .user-menu a {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 500;
            transition: color 0.3s;
            padding: 8px 0;
        }

        .error-message {
            color: #e74c3c;
            text-align: center;
            margin: 30px 0;
            font-size: 1.1rem;
            padding: 15px;
            background-color: rgba(231, 76, 60, 0.1);
            border-radius: 8px;
            border-left: 5px solid #e74c3c;
        }

        .success-message {
            color: #27ae60;
            text-align: center;
            margin: 30px 0;
            font-size: 1.1rem;
            padding: 15px;
            background-color: rgba(39, 174, 96, 0.1);
            border-radius: 8px;
            border-left: 5px solid #27ae60;
        }

        /* 主要内容区 */
        .main-content {
            padding: 30px 0;
            display: flex;
            flex-wrap: wrap;
            min-height: calc(100vh - 200px);
        }

        /* 侧边栏导航 */
        .sidebar {
            width: 280px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            margin-right: 20px;
            padding: 20px 0;
        }

        .sidebar-menu {
            list-style: none;
        }

        .sidebar-menu li {
            border-bottom: 1px solid #eee;
        }

        .sidebar-menu li:last-child {
            border-bottom: none;
        }

        .sidebar-menu a {
            display: block;
            padding: 18px 30px;
            color: #555;
            transition: all 0.3s;
            font-size: 16px;
        }

        .sidebar-menu a:hover {
            background: #f9f9f9;
            color: #e74c3c;
            padding-left: 35px;
        }

        .sidebar-menu a.active {
            background: #f1f1f1;
            color: #e74c3c;
            border-left: 4px solid #e74c3c;
        }

        .sidebar-menu i {
            width: 30px;
            text-align: center;
            margin-right: 10px;
            font-size: 18px;
        }

        /* 内容区域 */
        .content {
            flex: 1;
            min-width: 0;
            min-height: 100%;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            padding: 20px;
        }

        .content-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .content-header h2 {
            color: #2c3e50;
            font-size: 24px;
        }

        .product-tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        .product-tab {
            padding: 12px 20px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            color: #555;
            border-bottom: 3px solid transparent;
            transition: all 0.3s;
        }

        .product-tab:hover {
            color: #e74c3c;
        }

        .product-tab.active {
            color: #e74c3c;
            border-bottom-color: #e74c3c;
        }

        /* 删除菜单 */
        .order-actions-menu {
            position: relative;
            display: inline-block;
            float: right;
        }

        .menu-dots {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #666;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s;
        }

        .menu-dots:hover {
            background-color: #f0f0f0;
        }

        /* 下拉菜单内容 */
        .menu-content {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            background-color: white;
            min-width: 120px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
            border-radius: 6px;
            border: 1px solid #eee;
        }

        .menu-content a {
            color: #333;
            padding: 10px 15px;
            text-decoration: none;
            display: block;
            font-size: 14px;
            transition: all 0.2s;
        }

        .menu-content a:hover {
            background-color: #f5f5f5;
            color: #e74c3c;
        }

        .menu-content a i {
            margin-right: 8px;
            width: 18px;
            text-align: center;
        }

        .order-actions-menu:hover .menu-content {
            display: block;
            animation: fadeIn 0.2s;
        }

        /* 空状态样式 */
        .empty-products {
            text-align: center;
            padding: 50px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            min-height: 400px;
        }

        .empty-icon {
            font-size: 60px;
            color: #bdc3c7;
            margin-bottom: 20px;
        }

        .empty-text {
            color: #7f8c8d;
            margin-bottom: 25px;
            font-size: 18px;
        }

        .btn {
            padding: 10px 20px;
            border-radius: 4px;
            font-size: 15px;
            cursor: pointer;
            border: none;
            transition: all 0.3s;
        }

        .btn-primary {
            background: #e74c3c;
            color: white;
        }

        .btn-primary:hover {
            background: #c0392b;
        }

        /* 商品卡片样式 - 紧凑版 */
        .product-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            margin-bottom: 15px;
            overflow: hidden;
            transition: all 0.3s;
            border: 1px solid #eee;
        }

        .product-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .product-header {
            padding: 12px 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f9f9f9;
        }

        .product-title {
            font-weight: bold;
            color: #2c3e50;
            font-size: 20px;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-right: 10px;
        }

        .product-status {
            padding: 4px 8px;
            border-radius: 3px;
            font-size: 12px;
            font-weight: bold;
            margin-left: 10px;
            white-space: nowrap;
        }

        .status-onsale {
            background: #d4edda;
            color: #155724;
        }

        .status-sold {
            background: #fff3cd;
            color: #856404;
        }

        .status-purchased {
            background: #d1ecf1;
            color: #0c5460;
        }

        .product-body {
            padding: 15px;
            display: flex;
        }

        .product-image {
            width: 150px;
            height: 150px;
            border-radius: 6px;
            overflow: hidden;
            margin-right: 20px;
            flex-shrink: 0;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .product-details {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
        }

        .product-description {
            color: #666;
            font-size: 15px;
            line-height: 1.4;
            margin-bottom: 5px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            min-height: 45px;
            max-height: 45px;
            text-overflow: ellipsis;
        }

        /* 商品信息网格布局 */
        .product-info-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 4px;
            margin: 4px 0;
            font-size: 12px;
        }

        .info-item {
            display: flex;
            align-items: center;
        }

        .info-label {
            color: #7f8c8d;
            margin-right: 5px;
            white-space: nowrap;
        }

        .info-value {
            color: #555;
            font-weight: 500;
            font-size: 16px;
        }

        /* 成色标签样式 */
        .condition-1 {
            color: #28a745;
            font-weight: bold;
        }

        .condition-2 {
            color: #17a2b8;
            font-weight: bold;
        }

        .condition-3 {
            color: #ffc107;
            font-weight: bold;
        }

        .condition-4 {
            color: #fd7e14;
        }

        .condition-5 {
            color: #dc3545;
            font-weight: bold;
        }

        .product-meta {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-top: 0;
            padding-top: 5px;
        }

        .product-price {
            font-weight: bold;
            color: #e74c3c;
            font-size: 20px;
            white-space: nowrap;
        }

        .product-date {
            color: #7f8c8d;
            font-size: 16px;
            text-align: right;
        }

        .product-footer {
            padding: 10px 15px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-end;
            background: #f9f9f9;
        }

        .order-actions {
            display: flex;
            gap: 8px;
        }

        /* 按钮样式调整 */
        .btn {
            padding: 6px 12px;
            border-radius: 3px;
            font-size: 13px;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
        }

        .btn-outline {
            background: transparent;
            border: 1px solid #ddd;
            color: #555;
        }

        .btn-outline:hover {
            background: #f5f5f5;
            border-color: #ccc;
        }

        /* 排序下拉框 */
        .sort-options {
            display: flex;
            align-items: center;
        }

        .sort-label {
            margin-right: 8px;
            font-weight: 500;
            color: #2c3e50;
            white-space: nowrap;
        }

        .sort-select {
            padding: 8px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: white;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
            color: #2c3e50;
            min-width: 50px;
        }

        /* 页脚 */
        .footer {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 40px 0 20px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 30px;
        }

        .footer-section h3 {
            color: white;
            margin-bottom: 15px;
            font-size: 1.2rem;
        }

        .footer-section p {
            margin-bottom: 10px;
        }

        .footer-section ul {
            list-style: none;
        }

        .footer-section li {
            margin-bottom: 8px;
        }

        .footer-section a:hover {
            color: #e74c3c;
        }

        .footer-section i {
            margin-right: 8px;
            width: 20px;
            text-align: center;
        }

        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #34495e;
            font-size: 0.9rem;
            color: #bdc3c7;
        }

        /* 分页样式 */
        .pagination {
            margin: 20px auto;
            padding-top: 10px;
            text-align: center;
        }

        .page-link {
            padding: 8px 12px;
            margin: 0 5px;
            background: #e74c3c;
            color: white;
            border-radius: 4px;
            text-decoration: none;
            display: inline-block;
        }

        .current-page {
            padding: 8px 12px;
            margin: 0 5px;
            background: #2c3e50;
            color: white;
            border-radius: 4px;
            display: inline-block;
        }

        /* 响应式设计 */
        @media (max-width: 1200px) {
            .sidebar {
                width: 260px;
            }
        }

        @media (max-width: 992px) {
            .main-content {
                flex-direction: column;
            }

            .sidebar, .content {
                width: 100%;
                margin-right: 0;
            }

            .sidebar {
                margin-bottom: 20px;
            }

            .product-info-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .header .container {
                flex-direction: column;
            }

            .logo, .search-bar, .user-menu {
                width: 100%;
                margin-bottom: 15px;
            }

            .user-menu ul {
                justify-content: center;
            }

            .user-menu li {
                margin: 0 10px;
            }

            .content-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .sort-options {
                margin-top: 15px;
                width: 100%;
            }

            .product-body {
                flex-direction: column;
            }

            .product-image {
                width: 100%;
                height: 180px;
                margin-right: 0;
                margin-bottom: 10px;
            }
        }

        @media (max-width: 576px) {
            .product-tabs {
                flex-direction: column;
            }

            .product-tab {
                padding: 8px 15px;
                border-bottom: none;
                border-left: 3px solid transparent;
            }

            .product-tab.active {
                border-bottom: none;
                border-left-color: #e74c3c;
            }

            .order-actions {
                flex-wrap: wrap;
                justify-content: center;
            }
        }
    </style>

</head>
<body>
<!-- 顶部导航栏 -->
<header class="header">
    <div class="container">
        <div class="logo">
            <a href="${pageContext.request.contextPath}/home"><h1><i class="fas fa-recycle"></i> 校园二手市场</h1></a>
        </div>
        <div class="search-bar">
            <form action="${pageContext.request.contextPath}/productCenter" method="get">
                <input type="text" name="searchKeyword" value="${param.searchKeyword}" placeholder="搜索我的商品...">
                <input type="hidden" name="tab" value="${param.tab}">
                <input type="hidden" name="page" value="1">
                <button type="submit">搜索</button>
            </form>
        </div>
        <nav class="user-menu">
            <ul>
                <li>
                    <c:if test="${not empty user}">
                        <a href="${pageContext.request.contextPath}/userCenter"><i
                                class="fas fa-user"></i>&nbsp;${user.username}</a>
                    </c:if>
                </li>
                <li><a href="${pageContext.request.contextPath}/productUpload"><i class="fas fa-plus-circle"></i>
                    发布商品</a></li>
            </ul>
        </nav>
    </div>
</header>

<c:if test="${not empty productErrorInfo}">
    <div class="error-message">${productErrorInfo}</div>
</c:if>

<c:if test="${not empty productSuccessInfo}">
    <div class="success-message">${productSuccessInfo}</div>
</c:if>

<!-- 主要内容区 -->
<main class="main-content container">
    <!-- 侧边栏导航 -->
    <aside class="sidebar">
        <ul class="sidebar-menu">
            <li><a href="${pageContext.request.contextPath}/showAllOrder"><i class="fas fa-list-alt"></i> 我的订单</a></li>
            <li><a href="${pageContext.request.contextPath}/orderCar"><i class="fas fa-shopping-cart"></i> 购物车</a></li>
            <li><a href="${pageContext.request.contextPath}/productCenter" class="active"><i
                    class="fas fa-box-open"></i> 我的商品</a></li>
            <li><a href="${pageContext.request.contextPath}/userCenter"><i class="fas fa-user"></i> 个人中心</a></li>
            <li><a href="${pageContext.request.contextPath}/home"><i class="fas fa-home"></i> 返回主页</a></li>
        </ul>
    </aside>

    <!-- 内容区域 -->
    <div class="content">
        <div class="content-header">
            <h2>我的商品</h2>
            <div class="sort-options">
                <label for="sort-select" class="sort-label">排序:</label>
                <select id="sort-select" class="sort-select" onchange="location = this.value">
                    <option value="?tab=${tab}&searchKeyword=${param.searchKeyword}&sort=time_desc"
                    ${param.sort == 'time_desc' ? 'selected' : ''}>
                        最新 ↓
                    </option>
                    <option value="?tab=${tab}&searchKeyword=${param.searchKeyword}&sort=time_asc"
                    ${param.sort == 'time_asc' ? 'selected' : ''}>
                        最早 ↑
                    </option>
                    <option value="?tab=${tab}&searchKeyword=${param.searchKeyword}&sort=price_asc"
                    ${param.sort == 'price_asc' ? 'selected' : ''}>
                        价格 ↑
                    </option>
                    <option value="?tab=${tab}&searchKeyword=${param.searchKeyword}&sort=price_desc"
                    ${param.sort == 'price_desc' ? 'selected' : ''}>
                        价格 ↓
                    </option>
                </select>
            </div>
        </div>

        <!-- 商品状态选项卡 -->
        <div class="product-tabs">
            <div class="product-tab ${empty param.tab or param.tab == 'onsale' ? 'active' : ''}"
                 onclick="location='?tab=onsale&sort=${param.sort}&searchKeyword=${param.searchKeyword}'">
                在售商品 (${productOnsaleQuantity})
            </div>
            <div class="product-tab ${param.tab == 'sold' ? 'active' : ''}"
                 onclick="location='?tab=sold&sort=${param.sort}&searchKeyword=${param.searchKeyword}'">
                已售商品 (${productSoldQuantity})
            </div>
            <div class="product-tab ${param.tab == 'purchased' ? 'active' : ''}"
                 onclick="location='?tab=purchased&sort=${param.sort}&searchKeyword=${param.searchKeyword}'">
                已购商品 (${productPurchasedQuantity})
            </div>
            <div class="product-tab ${param.tab == 'removed' ? 'active' : ''}"
                 onclick="location='?tab=removed&sort=${param.sort}&searchKeyword=${param.searchKeyword}'">
                已下架商品 (${productRemovedQuantity})
            </div>
        </div>

        <c:choose>
            <c:when test="${empty productList}">
                <div class="empty-products">
                    <div class="empty-icon">
                        <i class="fas fa-box-open"></i>
                    </div>
                    <h3 class="empty-text">
                        <c:choose>
                            <c:when test="${empty param.tab or param.tab == 'onsale'}">您还没有在售的商品</c:when>
                            <c:when test="${param.tab == 'sold'}">您还没有已售出的商品</c:when>
                            <c:when test="${param.tab == 'purchased'}">您还没有购买的商品</c:when>
                            <c:when test="${param.tab == 'removed'}">您还没有下架的商品</c:when>
                        </c:choose>
                    </h3>
                    <c:if test="${empty param.tab or param.tab == 'onsale'}">
                        <a href="${pageContext.request.contextPath}/productUpload" class="btn btn-primary">发布商品</a>
                    </c:if>

                    <c:if test="${empty param.tab or param.tab == 'purchased'}">
                        <a href="${pageContext.request.contextPath}/showAllProducts" class="btn btn-primary">购买商品</a>
                    </c:if>
                </div>
            </c:when>
            <c:otherwise>
                <c:forEach items="${productList}" var="product" end="2">
                    <div class="product-card">
                        <div class="product-header">
                            <div class="product-title">${product.title}</div>
                            <div class="product-status
                                <c:choose>
                                    <c:when test="${product.status == '1'}">status-onsale</c:when>
                                    <c:when test="${product.status == '-1' && param.tab == 'sold'}">status-sold</c:when>
                                    <c:when test="${product.status == '-1' && param.tab == 'purchased'}">status-purchased</c:when>
                                    <c:when test="${product.status == '0' || param.tab == 'removed'}">status-removed</c:when>
                                </c:choose>">
                                <c:choose>
                                    <c:when test="${product.status == '1'}">在售中</c:when>
                                    <c:when test="${product.status == '-1' && param.tab == 'sold'}">已售出</c:when>
                                    <c:when test="${product.status == '-1' && param.tab == 'purchased'}">已购买</c:when>
                                    <c:when test="${product.status == '0' && param.tab == 'removed'}">已下架</c:when>
                                </c:choose>
                            </div>
                        </div>

                        <c:if test="${product.status eq 0}">
                            <div class="order-actions-menu">
                                <button class="menu-dots">⋮</button>
                                <div class="menu-content">
                                    <a href="${pageContext.request.contextPath}/productDeleteEver?productId=${product.productId}"
                                       onclick="return confirm('确定要永久删除此商品吗？')">删除商品</a>
                                </div>
                            </div>
                        </c:if>

                        <div class="product-body">
                            <div class="product-image">
                                <img src="${pageContext.request.contextPath}/productPictures/${product.productId}/${product.imageUrl}"
                                     onerror="this.src='${pageContext.request.contextPath}/default-product.webp'">
                            </div>
                            <div class="product-details">
                                <div class="product-description">${product.description}</div>
                                <!-- 商品详细信息区域 -->
                                <div class="product-info-grid">
                                    <div class="info-item">
                                        <span class="info-label">成色:</span>
                                        <span class="info-value condition-${product.conditionLevel}">
                                            <c:choose>
                                                <c:when test="${product.conditionLevel == 1}">全新</c:when>
                                                <c:when test="${product.conditionLevel == 2}">几乎全新</c:when>
                                                <c:when test="${product.conditionLevel == 3}">轻微使用痕迹</c:when>
                                                <c:when test="${product.conditionLevel == 4}">明显使用痕迹</c:when>
                                                <c:when test="${product.conditionLevel == 5}">需要维修</c:when>
                                            </c:choose>
                                        </span>
                                    </div>
                                    <div class="info-item">
                                        <span class="info-label">分类:</span>
                                        <span class="info-value">
                                            <c:choose>
                                                <c:when test="${product.categoryId == 1}">教材书籍</c:when>
                                                <c:when test="${product.categoryId == 2}">电子产品</c:when>
                                                <c:when test="${product.categoryId == 3}">服装鞋帽</c:when>
                                                <c:when test="${product.categoryId == 4}">交通工具</c:when>
                                                <c:when test="${product.categoryId == 5}">生活用品</c:when>
                                                <c:when test="${product.categoryId == 6}">文体娱乐</c:when>
                                                <c:when test="${product.categoryId == 7}">其他商品</c:when>
                                            </c:choose>
                                        </span>
                                    </div>
                                </div>
                                <div class="product-meta">
                                    <div class="product-price">¥<fmt:formatNumber value="${product.price}"
                                                                                  pattern="0.00"/></div>
                                    <div class="product-date">
                                        <c:choose>
                                            <c:when test="${product.status == '1'}">上架时间: <fmt:formatDate
                                                    value="${product.createTime}"
                                                    pattern="yyyy-MM-dd HH:mm:ss"/></c:when>
                                            <c:when test="${product.status == '-1' && param.tab == 'sold'}">售出时间:
                                                <fmt:formatDate value="${product.updateTime}"
                                                                pattern="yyyy-MM-dd HH:mm:ss"/></c:when>
                                            <c:when test="${product.status == '-1' && param.tab == 'purchased'}">购买时间:
                                                <fmt:formatDate value="${product.updateTime}"
                                                                pattern="yyyy-MM-dd HH:mm:ss"/></c:when>
                                            <c:when test="${product.status == '0' || param.tab == 'removed'}">下架时间:
                                                <fmt:formatDate value="${product.updateTime}"
                                                                pattern="yyyy-MM-dd HH:mm:ss"/></c:when>
                                        </c:choose>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="product-footer">
                            <div class="order-actions">
                                <a href="${pageContext.request.contextPath}/showProductInfo?productId=${product.productId}"
                                   class="btn btn-outline">查看详情</a>
                                <c:if test="${product.status == '1'}">
                                    <a href="${pageContext.request.contextPath}/productUpdate?productId=${product.productId}"
                                       class="btn btn-outline">编辑</a>
                                    <button class="btn btn-outline" onclick="if(confirm('确定要下架此商品吗？')) {
                                            window.location.href='${pageContext.request.contextPath}/productRemove?productId=${product.productId}'
                                            }">下架
                                    </button>
                                </c:if>
                                <c:if test="${product.status == '-1'}">
                                    <a href="${pageContext.request.contextPath}/showAllOrder?action=detail&orderId=${product.orderId}"
                                       class="btn btn-outline">查看订单</a>
                                </c:if>
                                <c:if test="${product.status == '0' || param.tab == 'removed'}">
                                    <button class="btn btn-outline" onclick="if(confirm('确定要重新上架此商品吗？')) {
                                            window.location.href='${pageContext.request.contextPath}/productRestore?productId=${product.productId}'
                                            }">重新上架
                                    </button>
                                </c:if>
                            </div>
                        </div>
                    </div>
                </c:forEach>

                <!-- 分页代码 -->
                <div class="pagination" style="margin:10px auto;padding-top: 10px; text-align: center;">
                    <c:if test="${totalPages == 1}">
                        <span class="current-page"
                              style="padding: 8px 12px; margin: 0 5px; background: #2c3e50; color: white; border-radius: 4px;">
                            1
                        </span>
                    </c:if>
                    <c:if test="${totalPages > 1}">
                        <!-- 首页和上一页 -->
                        <c:if test="${currentPage > 1}">
                            <a href="?tab=${tab}&searchKeyword=${searchKeyword}&sort=${sort}&page=1" class="page-link"
                               style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                                首页
                            </a>
                            <a href="?tab=${tab}&searchKeyword=${searchKeyword}&sort=${sort}&page=${currentPage - 1}"
                               class="page-link"
                               style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                                上一页
                            </a>
                        </c:if>

                        <!-- 页码显示逻辑 -->
                        <c:choose>
                            <c:when test="${totalPages <= 3}">
                                <!-- 总页数≤3时显示所有页码 -->
                                <c:forEach begin="1" end="${totalPages}" var="i">
                                    <c:choose>
                                        <c:when test="${i == currentPage}">
                            <span class="current-page"
                                  style="padding: 8px 12px; margin: 0 5px; background: #2c3e50; color: white; border-radius: 4px;">
                                    ${i}
                            </span>
                                        </c:when>
                                        <c:otherwise>
                                            <a href="?tab=${tab}&sort=${sort}&page=${i}" class="page-link"
                                               style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                                                    ${i}
                                            </a>
                                        </c:otherwise>
                                    </c:choose>
                                </c:forEach>
                            </c:when>
                            <c:otherwise>
                                <!-- 总页数>5时的智能分页显示 -->
                                <c:set var="startPage" value="${currentPage - 1}"/>
                                <c:set var="endPage" value="${currentPage + 1}"/>
                                <!-- 调整起始页 -->
                                <c:if test="${startPage < 1}">
                                    <c:set var="startPage" value="1"/>
                                    <c:set var="endPage" value="3"/>
                                </c:if>
                                <!-- 调整结束页 -->
                                <c:if test="${endPage > totalPages}">
                                    <c:set var="endPage" value="${totalPages}"/>
                                    <c:set var="startPage" value="${totalPages - 2}"/>
                                </c:if>
                                <!-- 显示当前页附近的3个页码 -->
                                <c:forEach begin="${startPage}" end="${endPage}" var="i">
                                    <c:choose>
                                        <c:when test="${i == currentPage}">
                                            <!--高亮显示-->
                                            <span class="current-page"
                                                  style="padding: 8px 12px; margin: 0 5px; background: #2c3e50; color: white; border-radius: 4px;">
                                                    ${i}
                                            </span>
                                        </c:when>
                                        <c:otherwise>
                                            <a href="?tab=${tab}&searchKeyword=${searchKeyword}&sort=${sort}&page=${i}"
                                               class="page-link"
                                               style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                                                    ${i}
                                            </a>
                                        </c:otherwise>
                                    </c:choose>
                                </c:forEach>
                            </c:otherwise>
                        </c:choose>
                        <!-- 下一页和尾页 -->
                        <c:if test="${currentPage < totalPages}">
                            <a href="?tab=${tab}&searchKeyword=${searchKeyword}&sort=${sort}&page=${currentPage + 1}"
                               class="page-link"
                               style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                                下一页
                            </a>
                            <a href="?tab=${tab}&searchKeyword=${searchKeyword}&sort=${sort}&page=${totalPages}"
                               class="page-link"
                               style="padding: 8px 12px; margin: 0 5px; background: #e74c3c; color: white; border-radius: 4px; text-decoration: none;">
                                尾页
                            </a>
                        </c:if>
                    </c:if>
                </div>

            </c:otherwise>
        </c:choose>
    </div>
</main>

<!-- 页脚 -->
<footer class="footer">
    <div class="container">
        <div class="footer-content">
            <div class="footer-section">
                <h3>关于我们</h3>
                <p>校园二手市场致力于为同学们提供安全、便捷的二手交易平台，促进资源循环利用。</p>
            </div>
            <div class="footer-section">
                <h3>快速链接</h3>
                <ul>
                    <li><a href="${pageContext.request.contextPath}/home">首页</a></li>
                    <li><a href="${pageContext.request.contextPath}/productUpload">发布商品</a></li>
                    <li><a href="${pageContext.request.contextPath}/showAllOrder">我的订单</a></li>
                </ul>
            </div>
            <div class="footer-section">
                <h3>联系我们</h3>
                <p><i class="fas fa-envelope"></i> 2424717883@qq.com</p>
                <p><i class="fas fa-phone"></i> 17868292884</p>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; 2025 CB 校园二手市场 版权所有</p>
        </div>
    </div>
</footer>

<script>

</script>
</body>
</html>